<template>
	<view class="content mainpadding" v-if="pageShow">
		<view class="flexleft paddinglr15">
			<view class="titletext hei_text bold" v-show="orderInfo.status==0">待支付</view>
			<view class="titletext hei_text bold" v-show="orderInfo.status==1 && orderInfo.is_run==0">待接單</view>
			<view class="titletext hei_text bold" v-show="orderInfo.status==1 && orderInfo.is_run==1">待取貨</view>
			<view class="titletext hei_text bold" v-show="orderInfo.status==1 && orderInfo.is_run==2">配送中</view>
			<view class="titletext hei_text bold" v-show="orderInfo.status==1 && orderInfo.is_run==3">待確認</view>
			<view class="titletext hei_text bold" v-show="orderInfo.status==88">已取消</view>
			<view class="titletext hei_text bold" v-show="orderInfo.status==2">已完成</view>
			<!-- <u-icon name="arrow-right" color="#999" size="16"></u-icon> -->
		</view>
		<!-- 地址信息 -->
		<view class="margin_top mainpadding border ffffff">
			<view class="flex">
				<view class="takeBox margin_right2">
					<image src="/static/images/order/take.png" mode=""></image>
				</view>
				<view class="flex1">
					<view class="text_weight color_san">{{orderInfo.to_name}} {{orderInfo.to_phone}}</view>
					<view class="margin_top text_a color_jiu">{{orderInfo.to_address}}</view>
				</view>
			</view>
			<!-- 帮送 只有在等吃的 -->
			<view class="flex margin_top">
				<view class="takeBox margin_right2">
					<image src="/static/images/order/deliver.png" mode=""></image>
				</view>
				<view class="flex1">
					<view class="text_weight color_san">{{orderInfo.go_name}} {{orderInfo.go_phone}}</view>
					<view class="margin_top text_a color_jiu">{{orderInfo.go_address}}</view>
				</view>
			</view>
		</view>
		
		<!-- 訂單規格 -->
		<view class="margin_top border2 ffffff mainpadding">
			<view class="flexbetween">
				<view class="text_a color_ling">合計金額</view>
				<view class="text_x color_red">${{orderInfo.z_money}}</view>
			</view>
			<view class="flexbetween margin_top">
				<view class="text_a color_ling">下單時間</view>
				<view class="text_a color_six">{{http.timereturn(orderInfo.createtime *1000)}}</view>
			</view>
			<view class="flexbetween margin_top">
				<view class="text_a color_ling">支付金額</view>
				<view class="text_a color_six">${{orderInfo.z_money}}</view>
			</view>
			<!-- 帮送 出現預估墊付 -->
			<view class="flexbetween margin_top" v-if="orderInfo.df_money">
				<view class="text_a color_ling">預估墊付</view>
				<view class="text_a color_six">${{orderInfo.df_money}}</view>
			</view>
			<view class="flexbetween margin_top">
				<view class="text_a color_ling">免運券</view>
				<view class="text_a color_six">-$2.00</view>
			</view>
			<view class="flexbetween margin_top">
				<view class="text_a color_ling">備注</view>
				<view class="text_a color_six">{{orderInfo.bei}}</view>
			</view>
			<view class="flexbetween margin_top" v-if="orderInfo.images_arr">
				<view class="text_a color_ling">用戶上傳</view>
				<!-- <view class="text_a color_six">2023-06-23 10:24:20</view> -->
			</view>
			<view class="flexleft flex_wrap">
				<view class="itemimgBox flexcenter margin_top" v-for="(item,index) in orderInfo.images_arr" :key="index">
					<image class="listleftimg radius" :src="item" mode="" @click="lbtpriview(index,orderInfo.images_arr)"></image>
				</view>
			</view>
			<view class="flexbetween margin_top">
				<view class="hei_text main_size bold">接單時間</view>
				<view class="xiaohui ">{{http.timereturn(orderInfo.jd_time * 1000)}}</view>
			</view>
			<view class="flexbetween margin_top" v-if="orderInfo.pzqh_image_text">
				<view class="hei_text main_size bold">騎手取貨上傳</view>
				<view class="xiaohui ">{{http.timereturn(orderInfo.pzqh_time * 1000)}}</view>
			</view>
			<view class="flexleft" v-if="orderInfo.pzqh_image_text">
				<view class="itemimgBox flexcenter margin_top" v-for="(item,index) in orderInfo.pzqh_image_text" :key="index">
					<image class="listleftimg radius" :src="item" mode="" @click="lbtpriview(index,orderInfo.pzqh_image_text)"></image>
				</view>
			</view>
			<view class="flexbetween margin_top" v-if="orderInfo.pzsd_image_text">
				<view class="hei_text main_size bold">騎手送达上傳</view>
				<view class="xiaohui ">{{http.timereturn(orderInfo.pzsd_time * 1000)}}</view>
			</view>
			<view class="flexleft" v-if="orderInfo.pzsd_image_text">
				<view class="itemimgBox flexcenter margin_top"  v-for="(item,index) in orderInfo.pzsd_image_text" :key="index">
					<image class="listleftimg radius" :src="item" mode="" @click="lbtpriview(index,orderInfo.pzsd_image_text)"></image>
				</view>
			</view>
		</view>
		<template v-if="orderInfo.is_ping">
			<view class="mainpadding border2 ffffff margin_top">
				<view class="flexleft">
					<view class="text_x color_ling margin_right1">騎手評價</view>
					<u-rate active-color="#FAB536" inactive-color="#b2b2b2" readonly  v-model="pjall.q_pf" :minCount="1" size="25"></u-rate>
				</view>
				<view class="text_five margin_top">{{pjall.q_txt}}</view>
			</view>
		</template>
		<!-- 底部按钮 -->
		<view class="footer flexright">
			<view class="greyBtn" v-show="orderInfo.status==2 || orderInfo.status==88" @click.stop="removeOrder(orderInfo.id)">刪除訂單</view>
			<view class="greyBtn margin_left" v-show="orderInfo.status==0 || (orderInfo.status==1 && orderInfo.is_run==0)"
				@click.stop="cancelOrder(orderInfo.id)">取消訂單</view>
			<view class="orangeBtn margin_left" v-show="orderInfo.status==0" @click.stop="paypt(orderInfo)">立即付款</view>
			<view class="orangeBtn margin_left"
				v-show="orderInfo.status==1 && (orderInfo.is_run==1 || orderInfo.is_run==2 || orderInfo.is_run==3)" @click.stop="callphone(orderInfo.takeaway.phone)">聯係騎手</view>
			<view class="orangeBtn margin_left" v-show="orderInfo.status==1 && orderInfo.is_run==3"
				@click.stop="overptdd(orderInfo)">完成訂單</view>
			<view class="orangeBtn margin_left" v-show="orderInfo.status==2 && orderInfo.is_ping==0" @click="goPublishEvaluate(orderInfo)">去評價</view>
		</view>
		<!-- 步骤条 -->
		<u-popup :show="show" mode="center" round="24" @close="show=false">
			<view class="popupBox">
				<u-steps current="3" dot direction="column" activeColor="#FFB800">
					<u-steps-item title="訂單提交成功" desc="06-29 15:36"></u-steps-item>
					<u-steps-item title="已出库" desc="06-29 15:36"></u-steps-item>
					<u-steps-item title="运输中" desc="06-29 15:36"></u-steps-item>
					<u-steps-item title="运输中" desc="06-29 15:36"></u-steps-item>
				</u-steps>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				orderInfo: {},
				pageShow: false,
				pjall: {}
			}
		},
		onLoad(options) {
			this.id = options.id

		},
		onShow() {
			this.getInfo()
		},
		methods: {
			removeOrder(id) {
				this.http.modal('提示', '是否確認刪除訂單', true, (resp) => {
					if (resp) {
						this.http.request("/api/orderrun/delOrderrun", 'POST', {
							id
						}).then(res=>{
							if (res.code == 1) {
								this.http.toast("刪除成功")
								setTimeout(()=>{
									uni.navigateBack(1)
								},1000)
							} else if (res.code == 0) {
								this.http.toast(res.msg)
							} else {
								this.http.toast('系統處理中，請稍後再試');
							}
						})
					}
				})
			},
			cancelOrder(id) {
				this.http.modal('提示', '是否確認取消訂單', true, (resp) => {
					if (resp) {
						this.http.request("/api/Orderrun/endOrderrun", 'POST', {
							id
						}).then(res=>{
							if (res.code == 1) {
								this.http.toast("取消成功")
								this.getInfo()
							} else if (res.code == 0) {
								this.http.toast(res.msg)
							} else {
								this.http.toast('系統處理中，請稍後再試');
							}
						})
					}
				})
			},
			overptdd(item) {
				this.http.modal('提示', '是否確認完成訂單', true, (resp) => {
					if (resp) {
						this.http.request("/api/orderrun/wanOrderrun", 'POST', {
							id: item.id
						}).then(item => {
							if (res.code == 1) {
								this.http.toast("操作成功")
								this.getInfo()
							} else if (res.code == 0) {
								this.http.toast(res.msg)
							} else {
								this.http.toast('系統處理中，請稍後再試');
							}
						})
					}
				})
			},
			paypt(item) { //跑腿訂單付款
				let data1 = {
					id: item.id,
					paymoney: item.z_money,
					order_type: 5,
					dyzf: 1
				}
				uni.navigateTo({
					url: "/pages_index/payment?msg=" + encodeURIComponent(JSON.stringify(data1))
				})
			},
			goPublishEvaluate(item) { //發表評價
				let data = {
					type: 2, //val：1商品訂單，2跑腿訂單，3呼叫訂單，4預約訂單，5票券
					qs_ishow: true,
					id: item.id
				}
				uni.navigateTo({
					url: "/pages_order/publishEvaluate?msg=" + encodeURIComponent(JSON.stringify(data))
				})
			},
			async getInfo() { //訂單詳情
				let _this = this
				let res = await this.http.request('/api/Orderrun/deailOrderrun', 'POST', {
					id: this.id,
				})
				if (res.code == 1) {
					if (res.data.images) {
						let images1 = res.data.images.split(",")
						let images_arr = []
						if (images1.length) {
							images1.forEach(item => {
								let text = this.imgUrl + item
								images_arr.push(text)
							})
							this.$set(res.data, "images_arr", images_arr)
							console.log(res.data);
						}
					}
					if (res.data.pzqh_image) {
						let pzqh_image_text1 = res.data.pzqh_image.split(",")
						let pzqh_image_text = []
						if (pzqh_image_text1.length) {
							pzqh_image_text1.forEach(item => {
								let text = this.imgUrl + item
								pzqh_image_text.push(text)
							})
							this.$set(res.data, "pzqh_image_text", pzqh_image_text)
							console.log(res.data);
						}
					}
					
					if (res.data.pzsd_image) {
						let pzsd_image_text1 = res.data.pzsd_image.split(",")
						let pzsd_image_text = []
						if (pzsd_image_text1.length) {
							pzsd_image_text1.forEach(item => {
								let text = this.imgUrl + item
								pzsd_image_text.push(text)
							})
							this.$set(res.data, "pzsd_image_text", pzsd_image_text)
						}
					}
					if (res.data.is_ping) {
						this.getpjdetail()
					}
					this.orderInfo = res.data
					this.pageShow = true
				} else if (res.code == 0) {
					this.http.toast(res.msg)
				} else {
					this.http.toast('系統處理中，請稍後再試');
				}
			},
			async getpjdetail(){
				let _this = this
				let res = await this.http.request('/api/shop/evaluatedeail', 'POST', {
					id: this.id,
					type:3
				})
				if (res.code == 1) {
					if(res.data.images){
						let arr = JSON.parse(JSON.stringify(res.data.images.split(",")))
						let arr2 = []
						arr.forEach(item=>{
							arr2.push(this.imgUrl + item)
						})
						this.$set(res.data,"images_text",arr2)
					}
					this.pjall = res.data
				}
			},
			lbtpriview(index,arr) {
							var i = arr; //獲取当前頁面的轮播圖數据
							//uniapp预览轮播圖
							uni.previewImage({
								current: index, //预览圖片的下标
								urls: i //预览圖片的地址，必须要數组形式，如果不是數组形式就转換成數组形式就可以
							})
						},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding-bottom: 150rpx;
	}

	.takeBox {
		width: 40rpx;
		height: 40rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.shopImg {
		width: 26.62rpx;
		height: 24rpx;
		min-width: 26.62rpx;
	}

	.contactShop {
		width: 132rpx;
		height: 51rpx;
		line-height: 51rpx;
		text-align: center;
		background: rgba(255, 196, 0, 0.1);
		border-radius: 9rpx 9rpx 9rpx 9rpx;
		border: 1rpx solid #FFB800;
		font-size: 22rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
	}
.listleftimg1{
		width: 140rpx;
		height: 140rpx;
		position: relative;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.goodsImg {
		width: 157rpx;
		height: 157rpx;
		position: relative;

		image {
			width: 100%;
			height: 100%;
			border-radius: 14rpx;
		}

		.shipment {
			// width: 71rpx;
			// height: 30rpx;
			// line-height: 30rpx;
			padding: 4rpx;
			box-sizing: border-box;
			text-align: center;
			background: #13C463;
			border-radius: 14rpx 0rpx 14rpx 0rpx;
			font-size: 18rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			position: absolute;
			left: 0;
			top: 0;
		}
	}

	.price {
		font-size: 30rpx;
		font-family: DIN Next LT Pro-Bold, DIN Next LT Pro;
		font-weight: bold;
		color: #FF5C00;
	}

	.greyBtn {
		padding:10rpx 30rpx;
		text-align: center;
		border: 2rpx solid rgba(102, 102, 102, 1);
		border-radius: 120rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.orangeBtn {
		padding:10rpx 30rpx;
		text-align: center;
		border: 2rpx solid rgba(255, 92, 0, 1);
		border-radius: 120rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FF5C00;
	}

	.popupBox {
		width: 660rpx;
		padding: 50rpx 50rpx 0;
		box-sizing: border-box;
	}

	::v-deep.u-steps-item__content {
		flex-direction: row;
		justify-content: space-between;
		margin-bottom: 50rpx;
		flex: 1;
	}

	::v-deep.u-text:nth-child(2) {
		justify-content: flex-end !important;
	}
</style>